<template>
  <el-form inline>
    <!-- 一级分类 -->
    <el-form-item label="一级分类">
      <el-select placeholder="请选择" v-model="category1Id" :disabled="isDisabled">
        <el-option v-for="c1 in CategoryStore.category1List" :value="c1.id" :label="c1.name"></el-option>
      </el-select>
    </el-form-item>
    <!-- 二级分类 -->
    <el-form-item label="二级分类">
      <el-select placeholder="请选择" v-model="category2Id" :disabled="isDisabled">
        <el-option v-for="c2 in CategoryStore.category2List" :value="c2.id" :label="c2.name"></el-option>
      </el-select>
    </el-form-item>
    <!-- 三级分类 -->
    <el-form-item label="三级分类">
      <el-select placeholder="请选择" v-model="CategoryStore.category3Id" :disabled="isDisabled">
        <el-option v-for="c3 in CategoryStore.category3List" :value="c3.id" :label="c3.name"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
export default {
  name: "CategorySeletor",
};
</script>
<script lang="ts" setup>
import { onMounted, computed } from "vue";
import useCategoryStore from "../../stores/category";
const CategoryStore = useCategoryStore();
//获取一级分类菜单
onMounted(() => {
  CategoryStore.getCategory1List();
});
// 一级分类的计算属性
const category1Id = computed<number>({
  get() {
    return CategoryStore.getCategory1Id as number;
  },
  set(val: number) {
    CategoryStore.getCategory2List(val);
  },
});
// 二级分类的计算属性
const category2Id = computed<number>({
  get() {
    return CategoryStore.getCategory2Id as number;
  },
  set(val: number) {
    CategoryStore.getCategory3List(val);
  },
});
defineProps(["isDisabled"]);
</script>
<style scoped></style>
